<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - IT课程数据分析系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .login-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            width: 100%;
            max-width: 420px;
            padding: 3rem 2.5rem;
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .login-header h1 {
            font-size: 1.75rem;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }
        
        .login-header p {
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #34495e;
            font-weight: 500;
        }
        
        .form-group input {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .btn-login {
            width: 100%;
            padding: 0.875rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .btn-login:hover {
            transform: translateY(-2px);
        }
        
        .btn-login:active {
            transform: translateY(0);
        }
        
        .btn-login:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .alert {
            padding: 0.875rem;
            border-radius: 6px;
            margin-bottom: 1.5rem;
            font-size: 0.9rem;
        }
        
        .alert-error {
            background: #fee;
            color: #c33;
            border: 1px solid #fcc;
        }
        
        .alert-success {
            background: #efe;
            color: #3c3;
            border: 1px solid #cfc;
        }
        
        .demo-accounts {
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid #e0e0e0;
        }
        
        .demo-accounts h3 {
            font-size: 0.9rem;
            color: #7f8c8d;
            margin-bottom: 1rem;
        }
        
        .demo-account {
            background: #f8f9fa;
            padding: 0.75rem;
            border-radius: 6px;
            margin-bottom: 0.5rem;
            font-size: 0.85rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .demo-account span {
            color: #34495e;
        }
        
        .demo-account button {
            padding: 0.25rem 0.75rem;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 0.8rem;
            cursor: pointer;
        }
        
        .demo-account button:hover {
            background: #5568d3;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h1>📊 系统登录</h1>
            <p id="site-description">IT课程数据分析与可视化系统</p>
        </div>
        
        <div id="alert-container"></div>
        
        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required autocomplete="username" placeholder="学号或工号">
                <div style="font-size: 0.75rem; color: #7f8c8d; margin-top: 0.25rem;">
                    学生请输入学号，教师请输入工号
                </div>
            </div>
            
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required autocomplete="current-password">
            </div>
            
            <button type="submit" class="btn-login" id="loginBtn">登录</button>
        </form>
        
        <div class="demo-accounts">
            <h3>演示账户（点击快速登录）</h3>
            <div class="demo-account">
                <span>管理员: admin / admin123</span>
                <button onclick="quickLogin('admin', 'admin123')">快速登录</button>
            </div>
            <div class="demo-account">
                <span>教师: T0001 / password123</span>
                <button onclick="quickLogin('T0001', 'password123')">快速登录</button>
            </div>
            <div class="demo-account">
                <span>学生: 2021000001 / password123</span>
                <button onclick="quickLogin('2021000001', 'password123')">快速登录</button>
            </div>
        </div>
        
        <div class="register-link" style="text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e0e0e0;">
            还没有账户？<a href="/register" style="color: #667eea; text-decoration: none; font-weight: 500; margin-left: 0.5rem;">立即注册</a>
        </div>
    </div>
    
    <script>
        const API_BASE = '/api/v1';
        
        function showAlert(message, type = 'error') {
            const container = document.getElementById('alert-container');
            container.innerHTML = `
                <div class="alert alert-${type}">
                    ${message}
                </div>
            `;
            
            setTimeout(() => {
                container.innerHTML = '';
            }, 5000);
        }
        
        async function login(username, password) {
            const loginBtn = document.getElementById('loginBtn');
            loginBtn.disabled = true;
            loginBtn.textContent = '登录中...';
            
            try {
                const response = await fetch(API_BASE + '/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password })
                });
                
                const data = await response.json();
                
                if (!response.ok) {
                    throw new Error(data.error || '登录失败');
                }
                
                // 保存token和用户信息
                localStorage.setItem('access_token', data.data.access_token);
                localStorage.setItem('refresh_token', data.data.refresh_token);
                localStorage.setItem('user_info', JSON.stringify(data.data.user));
                
                showAlert('登录成功！正在跳转...', 'success');
                
                // 根据角色跳转
                setTimeout(() => {
                    const role = data.data.user.role;
                    if (role === 'admin') {
                        window.location.href = '/admin/dashboard';
                    } else if (role === 'teacher') {
                        window.location.href = '/teacher/dashboard';
                    } else if (role === 'student') {
                        window.location.href = '/student/dashboard';
                    } else {
                        window.location.href = '/dashboard';
                    }
                }, 1000);
                
            } catch (error) {
                showAlert(error.message);
                loginBtn.disabled = false;
                loginBtn.textContent = '登录';
            }
        }
        
        function quickLogin(username, password) {
            document.getElementById('username').value = username;
            document.getElementById('password').value = password;
            login(username, password);
        }
        
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            if (!username || !password) {
                showAlert('请输入用户名和密码');
                return;
            }
            
            await login(username, password);
        });
        
        // 加载系统配置
        async function loadConfig() {
            try {
                const response = await fetch('/api/v1/settings/public');
                const data = await response.json();
                
                if (data.success && data.data.site_description) {
                    document.getElementById('site-description').textContent = data.data.site_description;
                    document.title = '登录 - ' + (data.data.site_name || 'IT课程数据分析系统');
                }
            } catch (error) {
                console.log('加载配置失败:', error);
            }
        }
        
        // 页面加载时执行
        loadConfig();
        
        // 如果已登录，直接跳转
        if (localStorage.getItem('access_token')) {
            const userInfo = JSON.parse(localStorage.getItem('user_info') || '{}');
            if (userInfo.role === 'admin') {
                window.location.href = '/admin/dashboard';
            } else if (userInfo.role === 'teacher') {
                window.location.href = '/teacher/dashboard';
            } else if (userInfo.role === 'student') {
                window.location.href = '/student/dashboard';
            }
        }
    </script>
</body>
</html>




